<template>
    <div class="common-layout">
        <el-row>
            <el-col :span="2">
                <el-text> 标的数量：{{ state.data.length }} </el-text>
            </el-col>
            <el-col :span="4">
                <el-text> 持仓总市值：{{ formatCurrency(state.total) }} </el-text>
            </el-col>
            <copyStocksToClipboard :data="state.data" />
            <el-button @click="multi()">multi</el-button>
        </el-row>
        <el-row>
            <el-table :data="state.data" height="900" 
            :cell-class-name="tableCellClassName"
            @sort-change="sortChange"
            @cell-click="cellClick"
            :default-sort="state.sort"
            style="width: 100%">
                <el-table-column prop="stock" label="股票" width="150">
                    <template #default="scope">
                        <ToStockDetail :stock="scope.row.stock" />
                    </template> 
                </el-table-column>
                <el-table-column prop="category" label="类别" width="100" />
                <el-table-column prop="wugu" label="吾股" sortable width="100"/>
                <el-table-column prop="lp" label="分位点" sortable width="100" />
                <el-table-column prop="hold" label="持仓手数" sortable width="80"/>
                <el-table-column prop="holdMarketCap" label="持仓市值"  sortable width="160">
                    <template #default="scope">
                        {{ formatCurrency(scope.row['holdMarketCap']) }}
                    </template>
                </el-table-column>
                <el-table-column prop="holdRate" label="持仓比率" width="100">
                    <template #default="scope">
                        {{ (scope.row['holdMarketCap'] / state.total * 100).toFixed(2) + "%" }}
                    </template>
                </el-table-column>
                <el-table-column prop="dividendYield" label="股息" sortable width="100"/>
                <el-table-column prop="drawdown" label="drawdown" sortable width="100"/>
                <el-table-column prop="lastBuyPct" label="lastBuyPct" sortable width="100"/>
                <el-table-column prop="lastSellPct" label="lastSellPct" sortable width="100"/>
                <el-table-column prop="dPct" label="dPct" sortable width="90"/>
                <el-table-column prop="wPct" label="wPct" sortable width="90"/>
                <el-table-column prop="mPct" label="mPct" sortable width="90"/>
                <el-table-column prop="yPct" label="yPct" sortable width="90"/>
                <el-table-column prop="wIncNum" label="wIncNum" sortable />
                <el-table-column prop="mIncNum" label="mIncNum" sortable />
            </el-table>
        </el-row>
    </div>
</template>

<script setup>
import { reactive } from 'vue';
import ToStockDetail from './ToStockDetail.vue';
import { getStockHold } from '../service/stock';
import { getLpClassName, formatCurrency, getWuguClassName, getIncNumClassName } from '../utils/help';
import CopyStocksToClipboard from './CopyStocksToClipboard.vue';
import { useRouteQuery } from '../utils/useRoute';
import { openNewTableMulti } from '../router';

document.title = "持仓";
const base = "SockHold"
const sortPropKey = base +"SortProp"
const sortOrderKey = base + "SortOrder"

const state = reactive({
    rawData: [],
    data: [],
    operationSelected: "",
    total: 0,
    sort: { 
        prop: sessionStorage.getItem(sortPropKey) || 'monthPct' , 
        order: sessionStorage.getItem(sortOrderKey) || 'ascending' 
    }
})

let stocks = useRouteQuery("stocks", "")

getStockHold().then( res => {
    state.rawData = res.data
    if (stocks != "") {
        let stocksArr = stocks.split(";")
        state.rawData = state.rawData.filter(item => stocksArr.includes(item.stock))
    }

    state.data = state.rawData
    state.rawData.forEach(element => {
        state.total += element.holdMarketCap  
    });
})

const sortChange = (column, prop, order) => {
    sessionStorage.setItem(sortPropKey, column.prop)
    sessionStorage.setItem(sortOrderKey, column.order)
}

const tableCellClassName = ({row, column, rowIndex, columnIndex}) => {
    var columnProperty = column.property
    if (columnProperty == "lp") {
        return getLpClassName(row.lp)
    }

    if (columnProperty == "mIncNum") {
        return getIncNumClassName(row.mIncNum)
    }

    if (columnProperty == "wugu") {
        return getWuguClassName(row.wugu)
    }

    if (columnProperty == "dividendYield") {
        if (row.dividendYield >= 3) {
            return 'lpgt99-cell'
        }
    }

    if (["lastSellPct","lastBuyPct","dPct","mPct", "wPct", "yPct"].includes(columnProperty)) {
        if (row[columnProperty] < 0) {
            return "pctlt0-cell";
        }
    }

    if (["moneyRank", "volumeRank"].includes(columnProperty)) {
        if (row[columnProperty] >= 700) {
            return 'rank-gt700-cell'
        } 

        if (row[columnProperty] <= 50) {
            return 'rank-lt50-cell'
        } 
    }

    if (["创业板ETF","上证50ETF","沪深300ETF","科创50ETF"].includes(row.stock)) {
        return 'lp-warning-row'
    }

    return ''
}

const cellClick = (row, column, cell, event) => {
    let columnProperty = column.property
    let val = row[columnProperty]

    if (["category"].includes(columnProperty)) {
        if (state.operationSelected != "" && state.operationSelected == val) {
            state.operationSelected = ""
            state.data = state.rawData
        } else {
            state.operationSelected = val
            state.data = state.rawData.filter(item => item.category == val)
        }
    }
}

const multi = () => {
    let stocks = []
    state.data.forEach(item => {
        stocks.push(item.stock)
    })
    openNewTableMulti(stocks)
}
</script>

<style>
</style>